<template>
  <div class="ABC">
    <ul>
      <li v-for="key of appa" :key="key" @click="$emit('gundong', key)" @touchmove="hanMove" :ref="key">
        {{key}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: Object
  },
  methods: {
    hanMove (e) {
      let mouseY = e.touches[0].pageY
      // console.log(mouseY)
      let AToTop = this.$refs['A'][0].offsetTop
      // console.log(AToTop)
      let alpha = (mouseY - 88) - AToTop
      let index = Math.floor(alpha / 20)
      let curLeter = this.appa[index]
      this.$emit('gundong', curLeter)
    }
  },
  computed: {
    appa () {
      let arr = []
      for (let key in this.list) {
        arr.push(key)
      }
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .ABC
    display flex
    justify-content center
    flex-direction column
    position fixed
    top 1.76rem
    bottom 0
    right 0
    width 0.4rem
    text-align center
    overflow hidden
    li
      height 0.4rem
      line-height 0.4rem
      margin-right 0.1rem
      color #4FBCD4
      cursor pointer
</style>
